<template>
  <h3>当前Num的值:{{ num }}</h3>
  <button @click="num++">Num ++ </button>
</template>

<script>
import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref, } from 'vue'

export default {
  name: 'School-Comp',
  setup() {
    console.log('--- setup ---');
    // 数据
    let num = ref(0);

    onBeforeMount((a) => {
      console.log('--- onBeforeMount ---', a);
    })
    onMounted((a) => {
      console.log('--- onMounted ---', a);
    })
    onBeforeUpdate((a) => {
      console.log('--- onBeforeUpdate ---', a);
    })
    onUpdated((a) => {
      console.log('--- onUpdated ---', a);
    })
    onBeforeUnmount((a) => {
      console.log('--- onBeforeUnmount ---', a);
    })
    onUnmounted((a) => {
      console.log('--- onUnmounted ---', a);
    })

    return { num }
  },
  // beforeCreate(){
  //   console.log('--- beforeCreate ---');
  // },
  // created(){
  //   console.log('--- created ---');
  // },
  // beforeMount(){
  //   console.log('--- beforeMount ---');
  // },
  // mounted(){
  //   console.log('--- mounted ---');
  // },
  // beforeUpdate(){
  //   console.log('--- beforeUpdate ---');
  // },
  // updated(){
  //   console.log('--- updated ---');
  // },
  // beforeUnmount(){
  //   console.log('--- beforeUnmount ---');
  // },
  // unmounted(){
  //   console.log('--- unmounted ---');
  // },

}
</script>

<style></style>
